<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">

<title>分页案例测试</title>

<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>


	<table class="layui-hide" id="test"></table>


	<script src="../js/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use('table', function() {
			var table = layui.table;

			table.render({
				elem : '#test'//选取id为test的table元素
				,
				url : '/bigdata/datas'//ajax调用的url
				//表头列的名称，field要和返回的数据一致
				,
				cellMinWidth : 120 //全局定义常规单元格的最小宽度，layui 2.2.1 新增,cols中有width则会覆盖
				,
				cols : [ [ {
					field : 'id',
					width : 150,
					title : 'ID',
					align : 'center'
				}//width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
				, {
					field : 'name',
					title : '用户名',
					sort : true,
					align : 'center',
					minWidth : 200
				}, {
					field : 'hobby',
					title : '性别',
					sort : true,
					align : 'center',
					minWidth : 200
				}, {
					field : 'dataflag',
					width : 120,
					title : '数据标识符',
					sort : true,
					align : 'center'
				} ] ],
				page : true//表示开启分页
				,
				limits : [ 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
						70, 75, 80, 85, 90, 95, 100 ]//可选每页显示条数
				,
				limit : 10//默认10条
				//,width: 900
				,
				height : 360,
				done : function(res) {//加载完后需要要做什么在这里写，
					//跳转页面window.location.href="https://www.baidu.com"
				}
			});
		});
	</script>

</body>

</html>